{% extends 'base.html' %}

{% block title %}订单{% endblock %}

{% block body %}
    {{ super() }}

<!-- idc section starts  -->
<section class="idc" id="idc">

    <h1 class="heading">已开通<span>主机</span> </h1>

    <div class="box-container">
        {% for host in orders %}
        <div class="box">
            <div class="node">
                <img src="http://q1.qlogo.cn/g?b=qq&nk=858125124&s=100" alt="qq avatar">
                <div class="info">
                    <h3>{{ host.oid }}</h3>
                    <h3>{{ host.hostip }}</h3>
                </div>
                <i class="fas fa-quote-right"></i>
            </div>
            
            <div class="detail">

                <div class="line">
                    <i class="fas fa-cloud"></i>
                </div>

                <div class="line">
                    <div class="left">
                        <i class="fas fa-server">大小:</i>
                    </div>
                    <div class="right">
                        <i>{{ host.hostsize }}M</i>
                    </div>
                </div>
                <div class="line">
                    <div class="left">
                        <i class="fas fa-key">帐号:</i>
                    </div>
                    <div class="right">
                        <i>{{ host.hostname }}</i>
                    </div>
                </div>
                <div class="line">
                    <div class="left">
                        <i class="fas fa-lock">密码:</i>
                    </div>
                    <div class="right">
                        <i>{{ host.hostpwd }}</i>
                    </div>
                </div>

                <div class="line">
                    <i class="fas fa-database"></i>
                </div>

                <div class="line">  
                    <div class="left">
                        <i class="fas fa-database">大小:</i>
                    </div>
                    <div class="right">
                        <i>{{ host.dbsize }}M</i>
                    </div>
                </div>
                <div class="line">
                    <i class="fas fa-spa"></i>
                </div>
                <div class="line">  
                    <div class="left">
                        <i class="fas fa-calendar-check">开始:</i>
                    </div>
                    <div class="right">
                        <i>{{ host.start }}</i>
                    </div>
                </div>
                <div class="line">  
                    <div class="left">
                        <i class="fas fa-calendar">结束:</i>
                    </div>
                    <div class="right">
                        <i>{{ host.end }}</i>
                    </div>
                </div>
                <div class="line">
                    <form style="display:inline;" action="{{ host.loginurl }}" method="post" target="_blank">
                        <input type="hidden" name="username" value="{{ host.hostname }}">
                        <input type="hidden" name="passwd" value="{{ host.hostpwd }}">
                        <button type="submit" class="btn gradient"><i class="fas fa-cloud"></i>登录</button>
                    </form>
                </div>

            </div>
        </div>
        {% endfor %}
    </div>

</section>
<!-- idc section end  -->

{% endblock %}

{% block footer %}
{{ super() }}
{% endblock %}

{% block script %}
    {{ super() }}
{% endblock %}